<template>
  <div class="m-header">
    <span class="iconfont header-back" v-show="this.level !== 0" @click="hideHeadBack">&#xe697;</span>
    <span class="iconfont" v-if="this.title === '新闻'">&#xe6a2;</span>
    <span class="iconfont" v-else>&#xe820;</span>
    <h1 class="text">{{this.title}}</h1>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  methods: {
    hideHeadBack () {
      this.$router.go(-1)
      this.$store.dispatch('showHeadBack', -1)
    }
  },
  computed: {
    ...mapState(['title']),
    ...mapState(['level'])
  },
  watch: {
    $route (to, from) {
      if (to.name === 'Movies') {
        this.$store.dispatch('changeTab', '电影')
      } else if (to.name === 'News') {
        this.$store.dispatch('changeTab', '新闻')
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "~styles/variable"
  .m-header
    position: fixed
    height: 44px
    width: 100%
    z-index: 99
    text-align: center
    background-color: $color-background
    color: $color-text
    top: 0
    .header-back
      font-size: .6rem
      position: absolute
      left: .1rem
      top: .15rem
    .text
      display: inline-block
      font-size: 14px
      line-height: 44px
</style>
